<template>
	<view class="edit-profile">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">修改个人信息</text>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 头像修改 -->
			<view class="avatar-section">
				<view class="avatar-wrapper">
					<image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
					<!-- 头像框 -->
					<image v-if="userInfo.avatarFrameUrl" :src="userInfo.avatarFrameUrl" class="avatar-frame" mode="aspectFit"></image>
				</view>
				<view class="avatar-options">
					<!-- 仅保留微信头像选择功能 -->
					<button class="wx-avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<text class="edit-text">使用微信头像</text>
					</button>
				</view>
			</view>
			
			
			<!-- 信息表单 -->
			<view class="form-group">
				<view class="form-item">
					<text class="label">用户名</text>
					<input type="text" 
						v-model="userInfo.username" 
						placeholder="请输入用户名"
						class="input"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">手机号码</text>
					<input type="number" 
						v-model="userInfo.phone" 
						placeholder="请输入手机号码"
						maxlength="11"
						class="input"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">微信号</text>
					<input type="text" 
						v-model="userInfo.wechatId" 
						placeholder="请输入微信号"
						class="input"
					/>
				</view>
				
				
			</view>
			
		</view>
		
		<!-- 保存按钮 -->
		<view class="button-container">
			<button class="save-btn" @click="saveChanges">保存修改</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'

// 判断是否在微信小程序环境
const isWechatMp = ref(false)

// 用户信息
const userInfo = ref({
	id: '',
	username: '',
	avatar: '',
	phone: '',
	wechatId: '',
})


// 密码表单
const passwordForm = ref({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
})

// 检查环境
const checkEnvironment = () => {
	// #ifdef MP-WEIXIN
	isWechatMp.value = true
	// #endif
}

// 获取用户信息
const getUserInfo = async () => {
	uni.showLoading({
		title: '加载中...'
	})
	try {
		const res = await request(
			'/user/getUserInfo',
			{
				method: 'GET'
			}
		)
		if (res.code === 200) {
			userInfo.value = res.data
		} else {
			uni.showToast({
				title: res.msg || '获取用户信息失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}

// 处理微信头像选择
const onChooseAvatar = (e) => {
	const tempFilePath = e.detail.avatarUrl
	
	if (!tempFilePath) {
		uni.showToast({
			title: '获取头像失败',
			icon: 'none'
		})
		return
	}
	
	uni.showLoading({
		title: '上传中...'
	})
	
	// 使用相同的上传功能上传微信头像
	uploadAvatarFile(tempFilePath)
}

// 封装头像上传功能
const uploadAvatarFile = (filePath) => {
	// 使用uni.uploadFile上传文件
	uni.uploadFile({
		url: 'http://127.0.0.1:8080/system/uploadImg', // 使用完整的URL地址
		filePath: filePath,
		name: 'file',
		header: {
			'sa-token': uni.getStorageSync('sa-token')
		},
		success: (uploadRes) => {
			try {
				const result = JSON.parse(uploadRes.data)
				if (result.code === 200) {
					// 更新头像URL
					userInfo.value.avatar = result.data
					
					// 更新用户信息
					request('/user/updateUser', {
						method: 'POST',
						data: {
							...userInfo.value
						}
					}).then(updateRes => {
						if (updateRes.code === 200) {
							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							})
							// 重新获取用户信息以确保数据同步
							getUserInfo()
						} else {
							uni.showToast({
								title: updateRes.msg || '头像更新失败',
								icon: 'none'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '头像更新失败',
							icon: 'none'
						})
					})
				} else {
					uni.showToast({
						title: result.msg || '上传失败',
						icon: 'none'
					})
				}
			} catch (e) {
				uni.showToast({
					title: '上传失败，请重试',
					icon: 'none'
				})
			}
		},
		fail: (error) => {
			console.error('上传失败:', error);
			uni.showToast({
				title: '上传失败，请重试',
				icon: 'none'
			})
		},
		complete: () => {
			uni.hideLoading()
		}
	})
}

// 保存修改
const saveChanges = async () => {
	// 表单验证
	if (!userInfo.value.username.trim()) {
		uni.showToast({
			title: '请输入用户名',
			icon: 'none'
		})
		return
	}
	
	if (!userInfo.value.phone || !/^1[3-9]\d{9}$/.test(userInfo.value.phone)) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		})
		return
	}
	
	
	uni.showLoading({
		title: '保存中...'
	})
	
	try {
		// 构建更新数据
		const updateData = {
			...userInfo.value,
			// 确保背景图字段也被包含
			backgroundImage: userInfo.value.backgroundImage || ''
		}
		
		// 如果有修改密码，添加密码相关数据
		if (passwordForm.value.oldPassword) {
			if(passwordForm.value.oldPassword !== userInfo.value.password){
				uni.showToast({
					title: '原密码错误',
					icon: 'none'
				})
				return
			}else{
				updateData.password = passwordForm.value.newPassword
			}
		}
		
		// 调用接口更新用户信息
		const res = await request(
			'/user/updateUser',
			{
				method: 'POST',
				data: updateData
			}
		)
		
		if (res.code === 200) {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.msg || '保存失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}

// 页面加载时获取用户信息
onMounted(() => {
	checkEnvironment()
	getUserInfo()
})
</script>

<style>
.edit-profile {
	min-height: 100vh;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	padding-bottom: 40rpx;
}

/* 导航栏样式 */
.nav-bar {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #2D1457;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #A259FF;
}

/* 表单容器 */
.form-container {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	margin-top: 20rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	border: 1px solid #2D1457;
}

/* 头像部分 */
.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #2D1457;
}
.avatar-wrapper {
	position: relative;
	margin-bottom: 20rpx;
}
.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
	border: 4rpx solid #A259FF;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	z-index: 1;
	background: #18122B;
}
.avatar-frame {
	position: absolute;
	top: -30rpx;
	left: -30rpx;
	width: 220rpx;
	height: 220rpx;
	z-index: 2;
	pointer-events: none;
}
.avatar-options {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 20rpx;
}
.wx-avatar-button {
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	color: #fff;
	font-size: 28rpx;
	border: none;
}
.wx-avatar-button[disabled] {
	opacity: 0.5;
	background: #2D1457;
	color: #B8B8D1;
}
.edit-text {
	color: #fff;
	font-size: 28rpx;
}

/* 表单样式 */
.form-group {
	padding: 20rpx 0;
}
.form-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #2D1457;
}
.form-item:last-child {
	border-bottom: none;
}
.label {
	width: 160rpx;
	font-size: 30rpx;
	color: #A259FF;
}
.input {
	flex: 1;
	font-size: 30rpx;
	color: #fff;
	background: transparent;
	border: none;
	outline: none;
}

/* 提示信息 */
.tips {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #221A36;
	border-radius: 8rpx;
	margin-top: 30rpx;
}
.tips-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
	color: #A259FF;
}
.tips-text {
	font-size: 26rpx;
	color: #B8B8D1;
}

/* 按钮样式 */
.button-container {
	padding: 40rpx 30rpx;
}
.save-btn {
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	color: #fff;
	font-size: 32rpx;
	padding: 20rpx 0;
	border-radius: 12rpx;
	text-align: center;
	border: none;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
}
.save-btn:active {
	opacity: 0.8;
}

/* 背景图部分 */
.bg-image-section {
	padding: 30rpx 0;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 30rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.bg-image-preview {
	position: relative;
	width: 100%;
	height: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 10rpx;
}

.bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg-image-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.bg-image-preview:hover .bg-image-mask,
.bg-image-preview:active .bg-image-mask {
	opacity: 1;
}

.bg-image-text {
	color: #fff;
	font-size: 28rpx;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
</style>

